<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>标准规范库</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link href="../../../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/common.css" rel="stylesheet" />
    <link href="../../css/helper.css" rel="stylesheet" />
    <style>
      .mui-table-view-cell {
        padding: 0 0;
      }

      .list-item {
        height: 67px;
        border-radius: 3px;
        margin-bottom: 13px;
        background-color: #ffffff;
        padding-left: 16px;
        padding-right: 13px;
      }

      .card-img-box {
        /* margin-right:16px; */
        height: inherit;
        width: 33px;
      }

      .card-img {
        width: 33px;
        height: 33px;
      }

      .card-content-box {
        padding: 0 16px;
        width: 70%;
      }

      .txt1 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .txt2 {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .img-tool-box {
        /* height:inherit; */
        width: 60px;
        /* flex: 1; */
      }
      .img-tool-box .imgs {
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      .img-tool {
        width: 19px;
        height: 19px;
        /* margin-top:10px; */
      }

      .img-19 {
        width: 19px;
        height: 19px;
      }

      .mui-table-view {
        margin-top: 44px;
        background-color: inherit;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 13px;
      }

      .mui-table-view-cell:after {
        background-color: #ffffff;
        margin-bottom: 13px;
      }
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">标准规范库</h1>
        <div class="img-tool-boxs">
          <img
            src="../../img/sousuo.png"
            class="img-tool fr"
            style="margin-left: 13px; margin-top: 10px"
            @click="search"
          />
        </div>
      </header>
      <div class="mui-content">
        <!-- 1、slider items -->
        <div
          class="mui-bar mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary"
        >
          <a
            class="mui-control-item"
            v-for="(v,i) in typeList"
            :key="v.id"
            :class="i==0?'mui-active':''"
            href="#item0"
            @tap="getSystemList(v.id)"
            >{{v.n}}</a
          >
          <!-- <a class="mui-control-item" href="#item2">验收制度</a>
					<a class="mui-control-item" href="#item3">监管制度</a> -->
        </div>
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div
              id="item0"
              class="mui-slider-item mui-control-content mui-active"
            >
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <!-- 2、列表 -->
                  <ul class="mui-table-view">
                    <li
                      class="mui-table-view-cell mui-media list-item f-r-b-c"
                      v-for="(item,index) in systemList"
                      :key="item.id"
                      @tap="detail(item.id)"
                    >
                      <div class="card-img-box f-r-c-c">
                        <img src="../../img/wenjian.png" class="card-img" />
                      </div>
                      <div class="card-content-box fs">
                        <div class="txt1">{{item.fn}}</div>
                        <div class="txt2">{{item.c}}</div>
                      </div>
                      <div class="img-tool-box">
                        <span class="imgs" @tap.stop="downlonds(item)">
                          <img src="../../img/xiazai.png" class="img-tool fr" v-if="item.isDown"/>
                          <img src="../../img/xiazai1.png" class="img-tool fr" v-else/>
                         </span>
                        <span class="imgs"  style="float: right" @tap.stop="addStore(item)">
                          <img src="../../img/shoucang_yishoucang.png" class="img-tool fr" v-if="item.ic"/>
                          <img src="../../img/shoucang_moren.png" class="img-tool fr" v-else/>
                        </span>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../../js/mui.js"></script>
    <script src="../../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../../js/mui.pullToRefresh.material.js"></script>
    <!-- <script src="../../../../js/jquery-1.7.2.min.js"></script> -->
    <script
      type="text/javascript"
      src="../../../../js/jquery-3.2.1.min.js"
    ></script>
    <script src="../../../../js/vue.js"></script>
    <script src="../../js/mkeyplus.base.js"></script>
    <script src="../../js/sqlite.js"></script>
    <script type="text/javascript">
      mui.init()
	   if(window.plus) {
	     plusready()
	   } else {
	     document.addEventListener("plusready", plusready, false)
	   }
     
	   function plusready() {
	     mui.DB.openSqlite()
	     vm.getType()
	   }
      let vm = new Vue({
        el: "#container",
        data: {
          ids: "",
          classifyCode: "",
          form: {
            page: 1,
            size: 20,
            donePage: 1,
            system: "APP",
            status: 1,
          },
          systemList: [],
          typeList: [],
          downList: [],
          downType: [],
          details: {},
          baseUrl: mui.baseApp.serverUrl,
        },
        created: function () {
          // this.getSystemList()
         
        },
        methods: {
          getSystemList(id) {
            this.ids = id
            if (this.form.page === 1) {
              plus.nativeUI.showWaiting('加载中...');
            }
            mui.baseApp.httpRequst(
              "get",
              "/app/api/knowledge/standard",
              {
                page: this.form.page,
                size: this.form.size,
                classifyCode: this.ids,
                isIChildren: true
              },
              (data) => {
                console.log("www", data)
                plus.nativeUI.closeWaiting();
                if (this.form.page == 1) {
                  this.systemList = []
                }
                this.isDwon(data)
                if (data.records.length < this.form.size) {
                  //
                  mui("#item0 .mui-scroll")
                    .pullToRefresh()
                    .endPullUpToRefresh(true) //参数为true代表没有更多数据了。
                  return
                } else {
                  mui("#item0 .mui-scroll")
                    .pullToRefresh()
                    .endPullUpToRefresh(false) //参数为true代表没有更多数据了。
                  mui("#item0 .mui-scroll").pullToRefresh().refresh(true) //启用上拉加载
                }
              },
              function () {
                // plus.nativeUI.closeWaiting()
                console.log("获取数据失败")
              }
            )
          },
          async isDwon(data) {
            let promiseAll = []
            data.records.forEach(item => {
              let tech = [{
                key: "id",
                value: item.id,
              }]
              // console.log("设备资料库", tech)
              promiseAll.push(mui.DB.selectTableData("dataStand", tech)
                .then((res) => {
                  if(res.length) {
                    item.isDown = true
                  } else {
                    item.isDown = false
                  }
                  console.log(item.isDown)
                })
                .catch((error) => {
                  item.isDown = false
                  console.log(error)
                }))
            })
            await Promise.all(promiseAll)
            console.log("333")
            this.systemList = this.systemList.concat(data.records)
          },
          getType() {
            mui.baseApp.httpRequst(
              "get",
              "/app/api/knowledge/standard/type",
              {},
              (data) => {
                console.log("dd", data)
                this.typeList = data
                this.ids = data[0].id
                this.getSystemList(this.ids)
                this.typeList.forEach((res) => {
                  mui.DB.createFormat("typeStand", res, "id")
                  mui.DB.insertOrReplace("typeStand", res)
                })
              },
              function () {
                // plus.nativeUI.closeWaiting()
                console.log("获取数据失败")
              }
            )
          },
          downlonds(item) {
            console.log("123", item)
            this.getDetils(item)
          },
          async getDetils(item) {
            let than = this
            let idss = item.id
             plus.nativeUI.showWaiting('下载中');
            let detas = null
            await mui.baseApp.httpRequst(
              "get",
              "/app/api/knowledge/standard/detail/" + idss,
              {},
              function (data) {
                console.log("120", data.data)
                let itms = data.data
                // than.details=itms
                detas = {
                  id: itms.id,
                  knowledgeType: itms.knowledgeType || "",
                  classifyCode: this.ids || "",
                  fileId: itms.fileId || "",
                  fileName: itms.fileName || "",
                  fileUrl: itms.fileUrl || "",
                  createId: itms.createId || "",
                  createTime: itms.createTime || "",
                  updateId: itms.updateId || "",
                  updateTime: itms.updateTime || "",
                  deleted: itms.deleted || "",
                  createName: itms.createName || "",
                  knowledgeTypeName: itms.knowledgeTypeName || "",
                  classifyCodeName: itms.classifyCodeName || "",
                  isCollection: itms.isCollection || "",
                  fn: item.fn || "",
                  c: item.c || "",
                }
              },
              function () {
                plus.nativeUI.closeWaiting()
                console.log("获取数据失败1")
              }
            );
            if(!detas) {
              return
            }
            
            if(!detas.fileId) {
              this.downCall(item, detas);
              return
            }
            
            let filePath = 'knowledge/standard/' + detas.fileId + '/' + detas.fileName
            await mui.baseApp.download(
                vm.baseUrl + detas.fileUrl, 
                filePath,
                function (res) {
                  console.log(res)
                  detas.fileUrl = res.filename
                },
                function () {
                  plus.nativeUI.closeWaiting();
                }
              );
            this.downCall(item, detas);
          },
          downCall(item, detas) {
            mui.DB.createFormat("dataStand", detas, "id")
            mui.DB.insertOrReplace("dataStand", detas)
            console.log("detas", detas)
            plus.nativeUI.closeWaiting();
            item.isDown = true
            mui.toast("操作成功");
          },
          // /app/api/knowledge/collection/add
          addStore(item) {
            mui.baseApp.httpRequst(
              "post",
              "/app/api/knowledge/collection/add",
              {
                tagetId: item.id,
                type: 1,
              },
              function (data) {
                item.ic = !item.ic
                mui.toast("操作成功")
              }
            )
          },
          detail(id) {
            mui.baseApp.openWindow("./detail.html", {
              ids: id,
            })
          },
          search() {
            mui.baseApp.openWindow("../../common/search.html", {
              type: 1,
            })
          },
        },
      })

      ;(function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $(".mui-scroll-wrapper").scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration,
        })
        $.ready(function () {
          $(".mui-scroll").pullToRefresh({
            down: {
              callback: function () {
                var self = this
                setTimeout(function () {
                  vm.form.page = 1
                  vm.getSystemList(vm.ids)
                  self.endPullDownToRefresh()
                }, 1000)
              },
            },
            up: {
              callback: function () {
                var self = this
                setTimeout(function () {
                  mui.toast("数据加载成功")
                  vm.form.page++
                  vm.getSystemList(vm.ids)
                  self.endPullUpToRefresh()
                }, 1000)
              },
            },
          })

          mui("#item0 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
          // mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        })
      })(mui)
      
      window.addEventListener('collection', function(event) {
        let data = event.detail
        for(let i = 0; i < vm.systemList.length; i++) {
          let item = vm.systemList[i]
          if(item.id == data.id) {
            if(data.isDown != undefined) {
              item.isDown = data.isDown
            }
            if(data.isCollection != undefined) {
              item.ic = data.isCollection
            }
            break
          }
        }
      });
    </script>
  </body>
</html>
